<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ photoinfo.add_time }}</span>
            <span>点击：{{ photoinfo.count }}次</span>
        </p>
        <hr />
        <!-- 缩略图区域 -->
        <div class="thumbs">
            <van-image
                width="120"
                v-for="(item, index) in imageList"
                :src="item"
                :key="index"
                @click="previewImage(index)"
            />
        </div>
        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>
    </div>
</template>

<script>

import {
    getPhotoDetailById,
    getPhotoDetailImagesById,
} from "@/api/photo.js";

import {Image, ImagePreview } from 'vant';

export default {
    components:{
        [Image.name]:Image,
    },
    data() {
        return {
            id: this.$route.params.id, // 从路由中获取到的片Id
            photoinfo: {}, // 图片详情
            imageList: [], // 缩略图的数组
        };
    },
    created() {
        this.getPhotoInfo();
        this.getPhotoThumbs();
    },
    methods: {
        // 获取图片的详情
        async getPhotoInfo() {
            try {
                let result = await getPhotoDetailById({ id: this.id });
                              
                if (result.code === 1) {
                    this.photoinfo = result.data[0];
                } else throw result.msg;
            } catch (error) {
                this.$dialog.alert({ title: "错误", message: error });
            }
        },

        // 获取缩略图
        async getPhotoThumbs() {
            try {
                let result = await getPhotoDetailImagesById({ id: this.id });
                //console.log(result);
                if (result.code === 1) {
                    // 把数据保存到 imageList 中
                    this.imageList = [];
                    result.data.forEach(item => {
                      this.imageList.push( this.APIDomainName + item.img);                      
                    });
                } else throw result.msg;
            } catch (error) {
                this.$dialog.alert({ title: "错误", message: error });
            }
        },

        previewImage(index) {
            ImagePreview({
                images: this.imageList,
                startPosition: index,
            });
        },
    },
};
</script>

<style lang="less">
.photoinfo-container {
    padding: 8px;
    h3 {
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 10px,0px;
    }
    .content {
        font-size: 14px;
        line-height: 30px;
        padding-top: 10px;
    }
    .thumbs {
        display: flex;
        flex-flow: row nowrap;
        img {
            box-shadow: 0 0 8px #999;
        }
    }
}
</style>
